<template>
  <!-- 自制封装按钮组件 -->
  <button class="btn" :class="className" @click="$emit('click',$event)">
    <!-- 在组件标签不确定的位置用slot占位,并给与slot默认值 -->
    <slot>默认按钮</slot>
  </button>
</template>

<script>
export default {
  props: {
    type: {
      type: String, // 类型
      default: 'default', // 默认值
      // 自定义校验
      validator(value) {
        return ['primary', 'success', 'danger', 'warning', 'default'].includes(value)
      }
    }
  },
  computed: {
    className() {
      return `btn-${this.type}`
    }
  }
}
</script>

<style lang="scss" scoped>
    .btn {
        outline: none;
        padding: 5px 10px;
        border: 1px solid transparent;
        color: #fff;
        &.btn-default{
            background-color: #ccc;
        }
        &.btn-primary{
            background-color: skyblue;
        }
        &.btn-success{
            background-color: green;
        }
        &.btn-danger{
            background-color: #f00;
        }
        &.btn-warning{
            background-color: orange;
        }
    }
</style>
